<template>
  <div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["total"],
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`); //page
      this.$parent.page = val;
      this.$parent.getData(this.$parent.uid);
    }
  },
  data() {
    return {
      // currentPage1: 5,
      // currentPage2: 5,
      // currentPage3: 5,
      // currentPage4: 4
    };
  }
};
</script>

<style lang='less' scoped>
/deep/.el-pagination {
  padding: 20px 0;
  padding-left: 428px;
  background-color: #fff;
  button {
    min-width: 30px;
    height: 30px;
    border: 1px solid #999;
    border-radius: 5px;
    margin: 0 5px;
    padding: 0;
  }
  el-pagination__jump {
    margin-left: 0;
  }
  .el-pager {
    li {
      min-width: 30px;
      height: 30px;
      border: 1px solid #999;
      border-radius: 5px;
      margin: 0 5px;
      padding: 0;
    }
    .el-icon-more {
      border: none;
      // background-color: none;
    }
  }
}
</style>